/* eslint-disable no-unused-vars */
import namespace from "../../namespace";
const { ResizeHandle } = namespace;

/**
 * 矩形选中框
 */
class RectangleSelectionPolicy extends namespace.policy.figure.SelectionPolicy {
  constructor() {
    super();
  }

  /**
   * @inherit
   * @param {} canvas
   * @param {*} figure
   */
  onSelect(canvas, figure) {
    // 已经选中
    if (figure.selectionHandles.isEmpty()) {
      this.selectBox = new namespace.shape.Rectangle({
        bgColor: null,
        stroke: "#0087ff",
        strokeWidth: 0.5
      });

      // 圆形不需要旋转
      if (!figure.isCircle) {
        let rotateFigure = this.createRotateHandle(figure);
        rotateFigure.show(canvas);
        figure.selectionHandles.add(rotateFigure);
      }

      if (figure.isResizeable()) {
        let r1 = this.createResizeHandle(figure, ResizeHandle.NORTH_WEST); // 1 = LEFT TOP
        let r2 = this.createResizeHandle(figure, ResizeHandle.NORTH_EAST); // 2 = RIGHT_TOP
        let r3 = this.createResizeHandle(figure, ResizeHandle.SOUTH_EAST); // 3 = RIGHT_BOTTOM
        let r4 = this.createResizeHandle(figure, ResizeHandle.SOUTH_WEST); // 4 = LEFT_BOTTOM

        figure.selectionHandles.add(r1, r2, r3, r4);

        r1.show(canvas);
        r2.show(canvas);
        r3.show(canvas);
        r4.show(canvas);
      }

      this.selectBox.show = () => this.selectBox.setCanvas(canvas);
      this.selectBox.hide = () => this.selectBox.setCanvas(null);
      this.selectBox.show();

      figure.selectionHandles.add(this.selectBox);
    }

    this.move(canvas, figure);
  }

  /**
   *  尝试改成订阅制 / 尝试矩阵来操作移动,放大缩小,之后再次更新属性.
   * @inherit
   * @param {} canvas
   * @param {*} figure
   */
  move(canvas, figure) {
    if (figure.selectionHandles.isEmpty()) {
      return;
    }

    const box = figure.selectionHandles.last();

    const geo = figure.getBoundingBox();

    const { x, y } = geo.getTopLeft();
    const { x: x1, y: y1 } = geo.getTopRight();
    const { x: x2, y: y2 } = geo.getBottomRight();
    const { x: x3, y: y3 } = geo.getBottomLeft();

    if (!figure.isCircle) {
      let { x: x4, y: y4 } = geo.getTopCenter();
      const rotate = figure.selectionHandles.first();
      rotate.setCenter(x4, y4 - 8);
    }

    box.attr({
      x: x,
      y: y,
      width: geo.w,
      height: geo.h
    });

    if (figure.isResizeable()) {
      let r1 = figure.selectionHandles.find(
        handle => handle.type === ResizeHandle.NORTH_WEST
      );
      let r2 = figure.selectionHandles.find(
        handle => handle.type === ResizeHandle.NORTH_EAST
      );
      let r3 = figure.selectionHandles.find(
        handle => handle.type === ResizeHandle.SOUTH_EAST
      );
      let r4 = figure.selectionHandles.find(
        handle => handle.type === ResizeHandle.SOUTH_WEST
      );

      const halfW = r1.getWidth() / 2;

      r1.setPosition(x - halfW, y - halfW);
      r2.setPosition(x1 - halfW, y1 - halfW);
      r3.setPosition(x2 - halfW, y2 - halfW);
      r4.setPosition(x3 - halfW, y3 - halfW);
    }
  }

  createResizeHandle(owner, type) {
    return new namespace.ResizeHandle({ owner, type });
  }

  createRotateHandle(owner) {
    return new namespace.RotateHandle({ owner });
  }
}

namespace.policy.figure.RectangleSelectionPolicy = RectangleSelectionPolicy;
